@charset "utf-8";
@import "init";
$bg_color:#ff9344;
$text_color:#494949;


@function r($px){
	@return $px/50+rem;
}


.web{
	header{
		width: 100%;
		height: r(150);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 r(22);
		box-sizing: border-box;
		.back_box{
			text-align:center;
			a{
				line-height: r(58);
				display: block;
				width: r(124);
				height: r(58);
				border: 1px solid $bg_color;
				border-radius: 10px;
				font-size: r(26);
				color: #000000;
				text-decoration: none;
			}
		}
		
		.search_box{
			p{
				
				font-size: r(26);
				color: #000000;
			}
		}
		
		.city_box{
			
			width: r(164);
			height: r(58);
			
			position: relative;
			form{
				select{
					width: r(164);
					height: r(58);
					vertical-align: top;
					border: 1px solid $bg_color;
					-webkit-appearance:none;
					padding: 0 r(10);
				}
				.triangle{
					width:0;
					height: 0;
					border: r(14) solid;
					border-color: orange transparent transparent;
					position: absolute;
					top: 10px;
					right: 4px;
				}
			}
		}
			
	
	
	}

	main{
		padding: 0 r(22);
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: r(150);
		bottom: r(107);
		width: 100%;
		
		overflow-y: auto;
		.title1{
			display: flex;
			justify-content: space-between;
			.food{
				width: r(148);
				height: r(183);
				text-align:center;
				.food_box{
					width: r(148);
					height: r(148);
					overflow: hidden;
					img{
						width: 100%;
					}
				}
				p{
					font-size: r(26);
					color: #000000;
				}
			}
		}
	
		.circle{
			width: r(120);
			height: r(33);
			display: flex;
			margin: 0 auto;
			.circle1{
				width:r(18);
				height: r(18);
				background-color:#ffc9a1;
				border-radius: 50%;
				margin-left: r(6);
			}
			.circle1:nth-child(1){
				background-color:$bg_color;
			}
		}
		
		.title{
			width: 100%;
			height: r(93);
			// background-color: red;
			padding: 0 r(22);
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			.bulk_box{
				
				i{
					font-size: r(55);
					color: $bg_color;
					vertical-align:middle;
				}
				span{
					font-size: r(30);
					color: #000;
					vertical-align:middle;
				}
			}
		
			.more_box{
				font-size: 0;
				margin-bottom: r(10);
				i{
					font-size: r(26);
					color: $bg_color;
					vertical-align:middle;
				}
				span{
					font-size: r(26);
					color: #000;
					vertical-align:middle;
				}
			}
		}
		
		.bread{
			display: flex;
			justify-content: space-between;
			margin-top: r(20);
			.bread_box{
				width: r(132);
				height: r(132);
				overflow: hidden;
				img{
					width: 100%;
				}
			}
		}
	}


	footer{
		ul{
			display: flex;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: white;
			li{
				width: 25%;
				text-align: center;
				i{
					font-size: r(72);
					color: $bg_color;
				}
				p{
					font-size: r(26);
					color: black;
				}
			}
		}
	}
}